<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header with-border">
            <form class="form-inline">
                <div class="input-group" style="width: 250px;">
                    <input type="text" class="form-control pull-right" (keyup.enter)="loadList(1)" placeholder="模板名称" [(ngModel)]='name' name="name">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-block btn-primary" (click)="loadList(1)">搜索</button>
                    </div>
                </div>
                <button type="button" class="btn btn-primary pull-right" (click)="editRule(null)">新增</button>
            </form>

            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive">
                <table style="table-layout:fixed" class="table table-hover table-striped table-bordered">
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th class="limitwi">短信通知</th>
                        <th class="limitwi">邮件通知</th>
                        <th class="limitwi">网页通知</th>
                        <th>操作</th>
                    </tr>
                    <tr *ngFor="let item of listData.list;">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td class="limitwi">{{item.smsContent}}</td>
                        <td class="limitwi">{{item.emailContent}}</td>
                        <td class="limitwi">{{item.webContent}}</td>

                        <td>
                            <button type="button" class="btn btn-primary btn-xs" (click)="editRule(item)"><i class="fa fa-edit"></i>编辑</button>
                            <!-- <button type="button" class="btn btn-primary btn-xs" (click)="execRule(item)"><i class="fa fa-dot-circle-o"></i>执行</button>
                            <button type="button" class="btn btn-primary btn-xs" (click)="editRule(item)"><i class="fa fa-list-alt"></i>日志</button> -->
                            <button type="button" class="btn btn-danger btn-xs" (click)="delTemplate(item)"><i class="fa fa-trash"></i>删除</button>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="box-footer clearfix">
                <p class="pull-left">共{{listData.total}}个 每页
                    <select [(ngModel)]="pageSize" (ngModelChange)="loadList(1)">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select> 个 当前显示第{{listData.pageIndex}}页 </p>
                <ul class="pagination pagination-sm no-margin pull-right">
                    <li (click)="changePage('pre',null)">
                        <a>
                        上一页
                        </a>
                    </li>
                    <li *ngFor="let item of pages" (click)="changePage('page',item+1)" [class.active]="pageIndex === item+1">
                        <a>
                        {{item+1}}
                        </a>
                    </li>
                    <li (click)="changePage('next',null)">
                        <a>
                        下一页
                        </a>
                    </li>
                </ul>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<template-edit [template]='selectedTemplate' (refreshList)="loadList()"></template-edit>
